
<template>
  <kt-vo-select v-model="open" dialogTitle="单选测试"
    :searchProps="voSearchProps" :tableProps="voTableProps"
    :getQueryDatasFn="voGetQueryDatasFn" @commit="commit"/>
  <el-button type="success" size="default" @click="openModel">打开单选器</el-button>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { VoInput, VoSelect, VoSwitch } from '@/'

const open = ref<boolean>(false)
function openModel() {
  open.value = true
}

const voSearchProps = ref([
  new VoInput({
    label: '编号',
    value_key: 'id',
    span: 8,
  }),
  new VoInput({
    label: '姓名',
    value_key: 'name',
    span: 8,
  }),
  new VoSelect({
    label: '性别',
    value_key: 'gender',
    dict: 'gender',
    default: null,
    span: 8,
  })
])
const voTableProps = ref([
  { label: '编号', value: 'id' },
  { label: '姓名', value: 'name' },
  { label: '性别', value: 'gender', dict: 'gender' },
])
async function voGetQueryDatasFn(queryData: any) {
  const records = [
    { id: 1, name: '小明', gender: '1' },
    { id: 2, name: '小红', gender: '2' },
    { id: 3, name: '小王', gender: '1' },
    { id: 4, name: '小丽', gender: '2' },
    { id: 5, name: '小美', gender: '2' },
  ]
  console.log(queryData)
  return {
    data: {
      records: records.filter(record => {
        for (let key in queryData) {
          if (record[key] && (queryData[key])) {
            if (!(record[key].toString().includes(queryData[key]))) {
              return false
            }
          }
        }
        return true
      }),
      total: 2,
    }
  }
}
function commit(row) {
  console.log('所选行是', row)
}
</script>

<style lang="scss" scoped>
</style>